S04-02 Web-BOM

• 概述
• window
  • 概述
  • API-Window
• location
  • 概述
    • location
    • URL
  • API-Location
  • query
• history
  • 概述
  • API-History
• navigator
  • 概述
  • API-Navigator

[TOC]

概述

BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，

比如：刷新浏览器、后退、前进、在浏览器中输入URL等

window

概述

window：对象是浏览器环境的顶级对象，代表当前浏览器窗口或标签页的实例。它是 JavaScript 与浏览器交互的桥梁，提供了控制窗口、文档、导航、定时器等功能的属性和方法。

核心特性：

1. 全局对象：在浏览器中，window 是全局对象，所有全局变量和函数都自动成为 window 的属性和方法。
2. 例外：ES6 的 let 和 const 声明的变量不会挂载到 window 上，而是存在于块级作用域中。

API-Window

实例属性：

• window.document：指向当前窗口加载的文档（即 Document 对象），用于操作 DOM。
• window.history：管理浏览历史（如 history.back(), history.pushState()）。
• window.indexedDB：IDBFactory，为应用程序提供异步访问索引数据库的能力。
• window.localStorage / window.sessionStorage：浏览器存储 API。
• window.location：提供当前 URL 的信息和控制导航（如 location.href、location.reload()）。
• window.navigator：获取浏览器信息（如用户代理、语言、平台等）。
• window.opener：返回对打开当前窗口的 window 的引用。
• window.performance：Performance ，返回包括 timing 和 navigation 属性的Performance对象，每个属性都是提供性能相关数据的对象。
• window.screen：访问屏幕信息（如 screen.width, screen.height）。

实例方法：

定时器：

• window.setTimeout()：(callback,delay?,...args?)，用于在指定延迟时间后执行函数或代码的全局方法。
• window.setInterval()：(callback,delay,...args?)，用于周期性无限循环调用函数或代码直到被显式取消的全局方法。
• window.clearTimeout()：(timeoutID)，用于取消由 setTimeout() 创建的定时器的全局方法。可以阻止尚未执行的定时器回调函数的运行。
• window.clearInterval()：(intervalID)，用于终止由 setInterval() 创建的周期性定时器的全局方法。

弹窗交互：

• window.alert()：(message)，用于在浏览器中显示一个模态对话框的全局方法，向用户展示一条消息并等待用户点击确认按钮，常用于简单的用户提示或调试。
• window.prompt()：(text,defaultText?)，用于显示一个模态对话框的全局方法，允许用户输入文本并返回输入内容。适用于快速获取用户输入的场景。
• window.confirm()：(message)，用于显示一个模态对话框的全局方法，允许用户通过点击“确定”或“取消”按钮进行二元选择（确认或取消）。

窗口：

• window.open()：(url?,target?,windowFeatures?)，用于打开新浏览器窗口或标签页的全局方法。可以控制新窗口的 URL、尺寸、位置、工具栏等
• window.close()：()，用于关闭当前浏览器窗口或标签页的方法。其行为受浏览器安全策略限制。

网络请求：

• window.fetch()：(url, options?)，用于发起网络请求的现代 API，基于 Promise 设计，取代了传统的 XMLHttpRequest。

CSS样式：

• window.getComputedStyle()：(element,pseudoEl?)，只读，用于获取元素最终计算后的 CSS 样式的方法。

帧动画：

• window.requestAnimationFrame()：(callback)，一种浏览器提供的机制，用于在浏览器的下一次重绘之前执行一个函数，它被广泛应用于动画的实现。
• window.cancelAnimationFrame()：(requestID)，用于取消由 requestAnimationFrame() 请求的动画帧的方法。

事件：

鼠标事件：

• click：鼠标点击元素（按下并释放左键）。
• dblclick：鼠标双击元素。
• contextmenu：右键点击元素（弹出上下文菜单前）。
• mousedown / mouseup：鼠标按下 / 释放。
• mousemove：鼠标在元素内移动。
• mouseenter / mouseleave：不冒泡，鼠标进入 / 离开元素本身。仅在进入目标元素时触发一次，子元素之间移动不触发。
• mouseover / mouseout：冒泡，鼠标进入 / 离开元素或其子元素。鼠标在元素和子元素之间移动时会重复触发。

键盘事件：

• keydown：按下键盘任意键。
• keyup：松开键盘按键。

表单事件：

• submit：表单提交。
• reset：表单重置。
• input：输入框内容实时变化。
• change：表单元素值变化并失焦（如输入框、下拉框）。
• focus / blur：元素获得 / 失去焦点。

窗口事件：

• DOMContentLoaded：HTML 解析完成（无需等待样式、图片）。
• load：页面及资源（如图片）加载完成。
• beforeunload：窗口关闭或刷新前。
• resize：窗口大小变化。
• scroll：页面滚动。

过渡事件：

• transitionend：CSS 过渡结束播放。

触摸事件：

• touchstart：触摸开始。
• touchmove：触摸移动。
• touchend：触摸结束。

剪切板事件：

• copy / paste：复制 / 粘贴内容。

媒体事件：

• play / pause：媒体播放 / 暂停。

location

概述

location

location：对象提供了当前文档的 URL 信息，并允许操作页面导航。使用时可以省略window。

URL

URL（Uniform Resource Locator，统一资源定位符）：是用于定位和访问互联网资源的地址，通俗来说就是我们在浏览器中输入的“网址”。它定义了资源的位置、访问方式及名称，是互联网资源的标准标识符。

URL 的组成结构：

一个完整的 URL 通常包含以下部分：

组成部分	示例值	说明
协议	https:	定义如何访问资源（如 http、https、ftp）
域名	www.example.com	资源所在的服务器的名称（或 IP 地址）
端口	:8080	服务器监听的端口（可选，默认根据协议隐藏，如 HTTP 默认端口是 80）
路径	/path/to/page	资源在服务器上的具体位置（类似文件路径）
查询参数	?name=John&age=25	以 ? 开头的键值对参数，用于向服务器传递附加信息（如搜索关键词）
哈希	#section2	页面内的锚点定位标识（浏览器滚动到指定位置，不会发送到服务器）

URL 的编码规则：

URL 中只能包含特定字符（字母、数字和 -_.~ 等），其他字符需通过 百分号编码 转换：

• 示例：空格 → %20，中文 → %E4%B8%AD
• 作用：确保特殊字符（如空格、符号、非英文字符）能安全传输。

注意事项：

• 安全性：使用 https 协议（如 https://bank.com）加密数据传输，避免敏感信息泄露。
• 长度限制：浏览器对 URL 长度有限制（通常 2000 字符左右），超长 URL 可能导致错误。
• SEO 友好：清晰的路径和参数（如 /products/phones）有助于搜索引擎优化。

API-Location

属性：

• href：https://example.com:8080/path?q=1#hash，获取或设置完整的 URL。修改会触发页面跳转。
• protocol：https:，URL 的协议（含 :）。修改可能触发跳转。
• hostname：example.com，域名部分。修改会跳转到新域名。
• port：8080，端口号（字符串形式）。若无则为空。修改会跳转到新端口。
• host：example.com:8080，域名 + 端口（若端口非默认）。修改会跳转。
• pathname：/path/，路径部分（以 / 开头）。修改会跳转到新路径。
• search：?q=1，查询字符串（含 ?）。修改会重新加载页面。
• hash：#hash，哈希部分（含 #），用于页面锚点。修改不会重载页面，但会记录历史。
• origin：https://example.com:8080，只读，协议 + 域名 + 端口。

方法：

• location.assign()：(url)，用于导航到新 URL 的核心方法，它会将新页面添加到浏览历史中（用户可通过“后退”按钮返回）。
• location.replace()：(url)，用于导航到新 URL 的方法，不会在浏览历史中新增记录，而是直接替换当前页面的历史条目（用户无法通过“后退”按钮返回原页面）。
• location.reload()：(forceRefresh?)，用于重新加载当前页面，支持从缓存或服务器强制获取最新内容。

query

解析URL中的query，并返回对象的形式

function getQuery(queryStr) {
  var query = {};
  if (queryStr.indexOf('?') > -1) {
    var index = queryStr.indexOf('?');
    queryStr = queryStr.substr(index + 1);
    var array = queryStr.split('&');
    for (var i = 0; i < array.length; i++) {
      var tmpArr = array[i].split('=');
      if (tmpArr.length === 2) {
        query[tmpArr[0]] = tmpArr[1];
      }
    }
  }
  return query;
}
console.log(getQuery(location.search));
console.log(getQuery(location.href));

history

概述

history：对象用于管理用户的浏览会话历史记录。它允许开发者以编程方式操作浏览器的历史记录，实现无刷新页面导航等功能，尤其在单页面应用（SPA）中至关重要。

API-History

属性：

• history.length：number，只读，返回一个表示会话历史中的条目数量的整数，包括当前加载的页面。
• history.state：State，用于访问/操作浏览器历史记录中的状态对象。主要用于SPA中的导航操作。
• history.scrollRestoration：auto|manual，默认：auto，控制浏览器是否在导航时自动恢复滚动位置。

方法：

• history.back()：()，用于让浏览器回到历史记录中的前一个页面。可理解为模拟用户点击浏览器的“后退”按钮。
• history.forward()：()，用于让浏览器前进到历史记录中的下一个页面。可理解为模拟用户点击浏览器的“前进”按钮。
• history.go()：(delta)，用于在浏览器历史记录栈中进行前进或后退操作。
• history.pushState()：(state,title?,url?)，用于将一个新的历史记录条目添加到浏览器的历史记录栈中，而不会刷新页面。
• history.replaceState()：(state,title?,url?)，用于替换当前浏览器历史记录中的条目。

事件：

• onpopstate：是一个浏览器的事件监听器，用于监听浏览器历史记录的变化。当用户通过浏览器的“后退”/“前进”按钮导航，或通过 pushState()/replaceState() 方法修改历史记录时触发。

navigator

概述

navigator：对象用于获取浏览器和操作系统的信息。它提供了丰富的属性和方法，帮助开发者检测用户环境、设备特性及浏览器功能支持情况，从而实现跨平台适配或功能增强。

API-Navigator